<template>
  <div class="private-chat">
    <div class="chat-header">
      <el-avatar :size="32" :src="targetAvatar" />
      <span class="target-name">{{ targetName }}</span>
    </div>
    
    <div class="chat-messages" ref="messageContainer">
      <div v-for="msg in messages" 
           :key="msg.id" 
           :class="['message', msg.senderId === currentUserId ? 'sent' : 'received']">
        <div class="message-content">{{ msg.content }}</div>
        <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
      </div>
    </div>

    <div class="quick-replies" v-if="showButtons">
      <el-button
        v-for="reply in quickReplies"
        :key="reply.text"
        size="small"
        @click="reply.action"
      >
        {{ reply.text }}
      </el-button>
    </div>

    <div class="chat-input">
      <el-input
        v-model="messageText"
        type="textarea"
        :rows="3"
        placeholder="输入消息..."
        @keyup.enter.native.exact="sendMessage"
      />
      <el-button type="primary" @click="sendMessage">
        发送
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessageBox } from 'element-plus'

export default {
  name: 'PrivateChat',
  emits: ['confirm-cooperation'],
  props: {
    targetId: {
      type: [String, Number],
      required: true
    },
    targetName: {
      type: String,
      required: true
    },
    targetAvatar: {
      type: String,
      default: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  
  setup(props, { emit }) {
    const messages = ref([
      // 模拟的历史消息数据
      {
        id: 1,
        content: "您好，我对这个任务很感兴趣",
        senderId: "current_user",
        timestamp: Date.now() - 3600000
      },
      {
        id: 2,
        content: "好的，请问您有什么具体问题吗？",
        senderId: props.targetId,
        timestamp: Date.now() - 3500000
      }
    ])
    const messageText = ref('')
    const messageContainer = ref(null)
    const currentUserId = "current_user" // 模拟当前用户ID
    const showButtons = ref(true)  // 添加控制按钮显示的状态

    const sendMessage = async () => {
      if (!messageText.value.trim()) return
      
      // 添加新消息到列表
      messages.value.push({
        id: Date.now(),
        content: messageText.value,
        senderId: currentUserId,
        timestamp: Date.now()
      })
      
      messageText.value = ''
      
      // 模拟对方回复
      setTimeout(() => {
        messages.value.push({
          id: Date.now() + 1,
          content: "好的，我明白了。我们可以进一步讨论细节。",
          senderId: props.targetId,
          timestamp: Date.now()
        })
        scrollToBottom()
      }, 1000)
      
      await scrollToBottom()
    }

    const scrollToBottom = async () => {
      await nextTick()
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight
      }
    }

    const formatTime = (timestamp) => {
      return new Date(timestamp).toLocaleTimeString()
    }

    const confirmCooperation = () => {
      ElMessageBox.confirm(
        '确认要与对方建立合作关系吗？',
        '确认合作',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'info'
        }
      ).then(() => {
        messages.value.push({
          id: Date.now(),
          content: "好的，我们合作愉快！",
          senderId: currentUserId,
          timestamp: Date.now()
        })
        
        setTimeout(() => {
          messages.value.push({
            id: Date.now() + 1,
            content: "太好了！让我们开始合作吧！",
            senderId: props.targetId,
            timestamp: Date.now()
          })
          showButtons.value = false
          emit('confirm-cooperation')
          scrollToBottom()
        }, 1000)
      }).catch(() => {
        // 用户取消操作，不做任何处理
      })
    }

    const quickReplies = [
      {
        text: "确认合作",
        action: confirmCooperation
      },
      {
        text: "需要考虑一下",
        action: () => {
          ElMessageBox.confirm(
            '您确定需要更多时间考虑吗？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'info'
            }
          ).then(() => {
            messages.value.push({
              id: Date.now(),
              content: "我需要考虑一下，稍后回复您。",
              senderId: currentUserId,
              timestamp: Date.now()
            })
            
            setTimeout(() => {
              messages.value.push({
                id: Date.now() + 1,
                content: "好的，我理解。请您考虑好后随时联系我。",
                senderId: props.targetId,
                timestamp: Date.now()
              })
              scrollToBottom()
            }, 1000)
            
            scrollToBottom()
          }).catch(() => {
            // 用户取消操作，不做任何处理
          })
        }
      }
    ]

    onMounted(() => {
      scrollToBottom()
    })

    return {
      messages,
      messageText,
      messageContainer,
      currentUserId,
      sendMessage,
      formatTime,
      quickReplies,
      showButtons
    }
  }
}
</script>

<style scoped>
.private-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-header {
  padding: 10px;
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.message {
  max-width: 70%;
  padding: 10px;
  border-radius: 8px;
  word-break: break-word;
}

.message.sent {
  align-self: flex-end;
  background-color: #409eff;
  color: white;
}

.message.received {
  align-self: flex-start;
  background-color: #f4f4f5;
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.chat-input {
  padding: 10px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  gap: 10px;
}

.target-name {
  font-weight: 500;
  color: #303133;
}

.quick-replies {
  padding: 10px;
  border-top: 1px solid #dcdfe6;
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style> 